<template>
  <div>
    <!-- 账号信息维护 -->
    <div class="content">
      <br />
      <!-- 用户名 -->
      <div class="info">
        <div class="df">
          <div>用户名：初学者YGL</div>
          <div>
            <el-button type="text" @click="dialogVisible = true">
              重命名
            </el-button>
          </div>
        </div>

        <div class="df m50">
          <div>手机号：15855573332</div>
          <div><el-button type="text">去更换</el-button></div>
        </div>

        <div class="df">
          <div>邮箱：mryan0201@163.com</div>
          <div>
            <el-button type="text" @click="dialogVisible1 = true">
              去更换
            </el-button>
          </div>
        </div>
      </div>

      <!-- 对话框重命名 -->
      <div class="dialog">
        <el-dialog
          v-model="dialogVisible"
          :width="400"
          :height="640"
          center
          align-center
          style="border-radius: 7px"
        >
          <template #header>
            <div class="tac mb20" style="font-size: 20px; font-weight: bold">
              安全验证
            </div>
          </template>

          <div class="tac">为了保证你的账号安全，请验证身份</div>
          <div class="tac" style="margin: 13px 0">
            验证成功之后进行下一步操作
          </div>
          <div
            class="tac"
            style="font-size: 20px; font-weight: bold; margin-bottom: 20px"
          >
            158*****3332
          </div>

          <!-- 表单 -->
          <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            class="demo-ruleForm"
            :size="formSize"
            status-icon
            style="margin-left: 30px"
          >
            <el-form-item prop="name">
              <el-form-item class="poDing" prop="code">
                <el-input
                  v-model="ruleForm.code"
                  class="input_shuru"
                  placeholder="请输入短信验证码"
                  style="width: 350px; height: 40px; border-radius: 3px"
                  :prefix-icon="ChatRound"
                />
                <div class="inp_yzm" @click="countDown()">
                  {{ content }}
                </div>
              </el-form-item>
            </el-form-item>
            <el-form-item>
              <el-button
                type=""
                @click="submitForm(ruleFormRef)"
                style="
                  width: 155px;
                  height: 40px;
                  background: #9cdce4;
                  color: #fff;
                  margin-bottom: 20px;
                "
              >
                下一步
              </el-button>
              <el-button
                plain
                @click="resetForm(ruleFormRef)"
                style="
                  width: 155px;
                  height: 40px;
                  margin-left: 40px;
                  margin-bottom: 20px;
                "
                >取消</el-button
              >
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>

      <!-- 绑定邮箱 -->
      <div class="dialog">
        <el-dialog
          v-model="dialogVisible1"
          :width="400"
          :height="640"
          center
          align-center
          style="border-radius: 7px"
        >
          <template #header>
            <div class="tac mb20" style="font-size: 20px; font-weight: bold">
              绑定邮箱
            </div>
          </template>

          <!-- 表单 -->
          <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            class="demo-ruleForm"
            :size="formSize"
            status-icon
            style="margin-left: 30px"
          >
            <el-form-item class="poDing" prop="code">
              <el-input
                v-model="ruleForm.code"
                class="input_shuru"
                placeholder="请输入邮箱地址"
                style="width: 350px; height: 40px; border-radius: 3px"
                :prefix-icon="Message"
              >
              </el-input>
            </el-form-item>
            <el-form-item class="poDing" prop="code" style="margin-right: 20px">
              <el-input
                v-model="ruleForm.code"
                placeholder="请输入邮箱验证码"
                style="width: 350px; height: 40px; border-radius: 3px"
                :prefix-icon="ChatRound"
              />
              <div class="inp_yzm" @click="countDown()">
                {{ content }}
              </div>
            </el-form-item>
            <el-form-item>
              <el-button
                type=""
                @click="submitForm(ruleFormRef)"
                style="
                  width: 155px;
                  height: 40px;
                  background: #9cdce4;
                  color: #fff;
                  margin-bottom: 20px;
                "
              >
                确定
              </el-button>
              <el-button
                plain
                @click="resetForm(ruleFormRef)"
                style="
                  width: 155px;
                  height: 40px;
                  margin-left: 40px;
                  margin-bottom: 20px;
                "
                >取消</el-button
              >
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import "../../assets/com/com.scss";
const dialogVisible = ref(false);
const dialogVisible1 = ref(false);
import type { FormInstance } from "element-plus";
// icon
import { Message, ChatRound } from "@element-plus/icons-vue";

interface RuleForm {
  name: string;
  code: string;
}
const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  name: "",
  code: "",
});

//确定
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};
// 取消
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

// 获取验证码
const content = ref("获取验证码"); // 按钮里显示的内容
const totalTime = ref(60); //记录具体倒计时时间
const canClick = ref(true);
const countDown = () => {
  if (!canClick.value) return;
  canClick.value = false;
  content.value = totalTime.value + "s后重新发送";
  let clock = window.setInterval(() => {
    totalTime.value--;
    content.value = totalTime.value + "s后重新发送";
    if (totalTime.value < 0) {
      window.clearInterval(clock);
      content.value = "重新获取验证码";
      totalTime.value = 60;
      canClick.value = true;
    }
  }, 1000);
};
</script>

<style lang="scss" scoped>
.content {
  // width: 100.625rem;
  height: 58.75rem;
  background: #ffffff;
  .info {
    width: 17.5rem;
    height: 8.875rem;
    margin: 3.125rem 0 0 3.125rem;
    font-size: 14px;
    .df {
      justify-content: space-between;
      align-items: center;
    }
  }
  .h3 {
    text-align: center;
    font-weight: bold;
    font-size: 25px;
  }
}

// 验证码
.poDing {
  position: relative;
}
.inp_yzm {
  color: #5ac4d3;
  position: absolute;
  right: 10px;
  top: 5px;
  cursor: pointer;
}
</style>
